<template>
  <div id="marquee" style="overflow:hidden;" v-bind:style="marStyle">
    <div id="marquee-container">
      <!--占位-->
      <section v-bind:style="flexHeight"></section>
      <template v-for="marquee of marqueeList">
        <section class="marquee-content"  v-bind:style="flexHeight">

          <div class="content-avatar">
            <img :src="marquee.avatar" />
          </div>
          <div class="content-desc">
            {{marquee.nickname.substr(0,1)}}***{{marquee.nickname.substr(-1)}} 刚刚加入「点亮读书会」
          </div>
        </section>
        <!--占位-->
        <section v-bind:style="flexHeight"></section>
      </template>
    </div>
    <!--占位-->
    <section v-bind:style="flexHeight"></section>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    name: "Index",
    data: function () {
      return {
        flexHeight:{},
        t:{},
        t1:{},
        timer:{},
        scrollTime:8,
        sleepTime:3000,
        blankSleepTime:500,
        isBlank:true,
        marStyle:{}
      }
    },
    mounted:function () {
      // 初始化参数
      this.initItem()
      //暂停定时器
      if(this.cancelTimer()){
        //还原
        this.t.scrollTop = 0
        //启动定时器
        this.timer=window.setInterval(this.mar,this.scrollTime)
      }
    },
    methods:{
      initItem:function () {
        this.t = document.getElementById('marquee')
        this.t1 = document.getElementById('marquee-container')
        $('#marquee').css({
          top:this.top + '%',
          left:this.left + '%'
        })
        this.flexHeight = {
          "height" : this.t.offsetHeight+'px'
        }
      },
      // 取消定时器
      cancelTimer: function () {
        var res = false;
        if(this.timer){
          window.clearInterval(this.timer);
          res = true;
        }else{
          res = true;
        }
        return res;
      },
      //滚动
      mar : function(){
        //滚到底部 复位
        if(this.t1.offsetHeight<=this.t.scrollTop){
          this.t.scrollTop-=this.t1.offsetHeight;
        }
        //每滚过一条记录停顿3秒,滚到空白区域停顿一秒
        else if(this.t.scrollTop !==0 && this.t.scrollTop % this.t.offsetHeight === 0){
          //取消定时器
          if(this.cancelTimer()){
            window.setTimeout(()=> {
              //滚吧
              this.t.scrollTop ++;
              //再次启动定时器
              this.timer=window.setInterval(this.mar,this.scrollTime)
            },this.isBlank ? this.sleepTime : this.blankSleepTime)
            this.isBlank = !this.isBlank
          }
        }
        //继续滚动
        else{
          this.t.scrollTop++;
        }
      },

    },
    props:['marqueeList','top','left']
  }
</script>

<style scoped>
  @import "css/Index.css";
</style>
